<template>
  <div style="padding:0 20px;">
    <a-space :size="0" style="padding:15px 15px; border: 1px solid #e2e7f0;border-left: 4px solid #3760f3">
      <div
        style="border-radius:10px ;background-color: #2f54eb;color: white;font-size: x-large; padding:5px 3px 5px 13px; width: 50px;height: 50px">
        梳
      </div>
      <a-row style="margin-top: 8px">
        <a-col :span="6">
          <a-space direction="vertical" style="margin-left: 20px">
            <div>
              <span  style="font-size: larger;font-weight: bold">
                {{topDataObj.workingProcedure}}
                <a-tag style="margin-left: 10px" color="blue">
                {{topDataObj.shift}}
                </a-tag>
              </span>
            </div>
            <div style="width: 350px">
              <span>
                排班编号：{{topDataObj.schedulingNumber}}
              </span>
            </div>
          </a-space>
        </a-col>
        <a-col :span="6">
          <a-space direction="vertical" style="margin-left: 20px">
            <div style="width: 350px">
              <span>
                组织：{{topDataObj.company}}
              </span>
            </div>
            <div style="width: 350px">
              <span>
                车间：{{topDataObj.workshop}}
              </span>
            </div>
          </a-space>
        </a-col>
        <a-col :span="6">
          <a-space direction="vertical" style="margin-left: 20px">
            <div style="width: 350px">
              <span>
                时间：{{topDataObj.time}}
              </span>
            </div>
            <div style="width: 350px">
              <span>
                班制：{{topDataObj.shiftSystem}}
              </span>
            </div>
          </a-space>
        </a-col>
        <a-col :span="6">
          <a-space direction="vertical" style="margin-left: 20px">
            <div style="width: 350px">
              <span>
                班长：{{topDataObj.monitor}}
              </span>
            </div>
            <div style="width: 350px">
              <span>
                班教：{{topDataObj.classTeaching}}
              </span>
            </div>
          </a-space>
        </a-col>
      </a-row>
      <div>
        <a-date-picker v-model="queryParam.paiBanTime" :format="dateFormat" />
      </div>
    </a-space>

    <div>
      <div style="display: inline-flex;margin-top: 20px;font-size: large">
        班次人员
      </div>

      <a-button
        @click="batchDel"
        style="display: inline-flex;padding: 5px;background-color: white;color: #fa3e3e;border: 1px solid #fa3e3e;border-radius: 5px;margin-left: 10px;">
        一键删除
      </a-button>
      <a-space style="float: right;margin-top: 20px">
        <a-button @click="handleSearch()" type="primary">查询</a-button>
        <a-button @click="handleAdd" type="primary">添加人员</a-button>
        <a-button >复制昨日排班</a-button>
        <a-button>导出排班表</a-button>
      </a-space>
    </div>
    <div
      style="background: #ffffff; border-radius: 5px; padding: 20px; padding-bottom: 100px; position: relative;margin-top: 20px">
      <a-table
        :scroll="{ x: true }"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :dataSource="dataSource"
        rowKey="id"
        :loading="loading"
        :pagination="false"
      >
        <div slot="工种" slot-scope="text,record">
          <a-space>
            <j-dict-select-tag placeholder="请选择工种" v-model="text" dictCode="work_type"
                               @change="selectChange(text,'workType',record)"/>
          </a-space>
        </div>
        <template v-for="(item, itemIndex) in [{name:'cscs1',aaa:'222'},{name:'测试1',aaa:'333'}]">
          <a-table-column
            :title="item.name"
            :key="item.aaa"
            :width="100"
          >
            <template slot-scope="text, record">
              {{123}}
            </template>
          </a-table-column>
        </template>
<!--        v-for="(item,index) in record.schedulingSpunYarnDevices" :key="index"-->
        <div slot="动态列" slot-scope="text,record,index, column" >
          <a-space>
            <div v-html="text"></div>
            <a-button v-if="text != ''" type="primary" ghost size="small" icon="plus" @click="showModal(record,'schedulingSpunYarnDevices',column)"></a-button>
          </a-space>
        </div>
        <div slot="考勤状态" slot-scope="text,record">
          <a-space>
            <j-dict-select-tag placeholder="请选择考勤状态" v-model="text" dictCode="attendance_status"
                               @change="selectChange(text,'attendanceStatus',record)"/>
          </a-space>
        </div>
        <!-- 操作 -->
        <a-space slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="确认要移除吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
            >
              <a-button style="color: red;padding: 0px" type="link" icon="delete">删除</a-button>
            </a-popconfirm>
          </template>
        </a-space>
      </a-table>
      <a-pagination
        style="position: absolute; bottom: 10px"
        :default-current="ipagination.current"
        :total="ipagination.total"
        @change="onChangePage"
      />
      <span style="position: absolute; bottom: 10px; right: 20px">{{ ipagination.total }}结果</span>
    </div>
    <!-- 表单区域 -->
    <shumian-user-modal ref="modalForm" @ok="modalFormOk"></shumian-user-modal>
    <jitai-modal ref="shumianModal" @editSubmit="editSubmit"></jitai-modal>
  </div>

</template>

<script>

import JitaiModal from './modules/JitaiModal'
const path = '/crm_scheduling_spun_yarn/crmSchedulingSpunYarn'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ShumianUserModal from '@views/productionDispatchManagement/schedulingManagement/modules/ShumianUserModal.vue'
import { editDevice, editSchedulingSpunYarn, getDailyPlanSpunYarn } from '../../../api/customApi'

export default {
  inject: ['selectQuery'],
  mixins: [JeecgListMixin],
  components: { JitaiModal, ShumianUserModal },
  data() {
    return {
      topDataObj:{
        workingProcedure:"",
        shift:"",
        schedulingNumber:"",
        company:"",
        workshop:"",
        time:"",
        shiftSystem:"",
        monitor:"",
        classTeaching:"",
      },
      dateFormat: 'YYYY/MM/DD',
      columns: [],
      queryParam: {
        paiBanTime:moment().format('YYYY-MM-DD')
      },
      showList:[],
      url: {
        list: path + '/list',
        delete: path + '/delete',
        deleteBatch: path + '/deleteBatch',
        toDetail: '/personnelInformation/modules/blacklistDetails'
      },
      defaultColumns: [],
    }
  },
  watch:{
    dataSource(newVal) {
      this.generateDynamicColumns(newVal);
    },
  },

  methods: {
    handleButtonClick(){
      console.log(this.selectQuery)
    },
    handleSearch() {
      this.queryParam.company = this.selectQuery.company
      this.queryParam.workshop = this.selectQuery.workshop
      this.searchQuery()
    },
    generateDynamicColumns(dataSource) {
      this.columns = [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'realname',
          ellipsis: true
        },
        {
          title: '工号',
          align: 'center',
          dataIndex: 'workNo',
          ellipsis: true
        },
        {
          title: '工种',
          align: 'center',
          dataIndex: 'workType',
          ellipsis: true,
          scopedSlots: { customRender: '工种' },
        },
        {
          title: '工序',
          align: 'center',
          dataIndex: 'workingProcedure_dictText',
          ellipsis: true
        },
        {
          title: '设备总台数',
          align: 'center',
          dataIndex: 'deviceNum',
          ellipsis: true
        },
        {
          title: '看台定额测算',
          align: 'center',
          dataIndex: 'calculation',
          ellipsis: true
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime',
          ellipsis: true
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'endTime',
          ellipsis: true
        },
        {
          title: '考勤状态',
          align: 'center',
          dataIndex: 'attendanceStatus',
          ellipsis: true,
          scopedSlots: { customRender: '考勤状态' },
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          fixed: 'right'
        }
      ]
      let trendsColumn = [];
      let query = {
        planTime:this.queryParam.paiBanTime
      }
      getDailyPlanSpunYarn(query).then((res) => {
        this.showList = []
        if (res.success) {
          this.showList = res.result.records
          console.log('showList')
          console.log(this.showList)
          this.showList.forEach((item) => {
            trendsColumn.push({
              title: item.productType_dictText,
              align: 'center',
              dataIndex: item.id,
              ellipsis: true,
              scopedSlots: { customRender: '动态列' },
            });

            //修改数据格式
            dataSource.forEach((i) => {
              let trendsValue = ''
              i.schedulingSpunYarnDevices.forEach((sly) => {
                if(item.id == sly.dailyPlanId){
                  sly.devices.forEach((device) => {
                    trendsValue += device.workshopDictText + '-' + device.deviceNo + ';'
                  })
                }
              })
              i[item.id] = trendsValue
            })
          })

          const indexToInsert = this.columns.findIndex(col => col.dataIndex === 'workingProcedure_dictText');
          this.columns.splice(indexToInsert + 1, 0, ...trendsColumn); // 在工序列后面插入动态生成的列头

        } else {
          that.$message.warning(res.message)
        }
      })
    },
    moment,
    onChangePage(e) {
      this.ipagination.current = e
      this.loadData()
    },
    showModal(records, param, column) {
      records.planId = column.key
      this.$refs.qinghuaModal.show(records, param, false)
    },
    selectChange(value, label, record) {
      console.log(value)
      console.log(label)
      let query = {
        id: record.id,
        workType: label == 'workType' ? value : null,
        attendanceStatus: label == 'attendanceStatus' ? value : null,
      }
      editSchedulingSpunYarn(query).then((res) => {
        if (res.success) {
          this.$message.success('修改成功')
        }
        this.searchQuery()
      })
    },
    editSubmit(params, selectPlanData, choseNum, id){
      //选择的机台id
      selectPlanData.forEach((item) => {
        item.deviceIds = item.deviceIds.join(',')
      })
      console.log(selectPlanData)
      let query = {
        id: id,
        schedulingSpunYarnDevices: selectPlanData,
      }
      editSchedulingSpunYarn(query).then((res) => {
        if (res.success) {
          this.$message.success('修改成功')
        }
        this.searchQuery()
      })
    }
  }
}
</script>

<style></style>
